<template>
	<div class="cart-page">
		<van-nav-bar title="购物车" left-arrow @click-left="$router.back()">
			<template #right>
				<van-icon name="ellipsis" size="18" />
			</template>
		</van-nav-bar>

		<!-- 当获取的数据没有长度的时候 -->
		<div class="empty" v-if="!goodslist.length">
			<van-icon name="smile-o" color="#2c3e50" size="60" />
			<div class="title">购物车空空空如也</div>
			<van-button color="rgb(27, 174, 174)" @click="goURL('/home')"
				>前往首页</van-button
			>
		</div>
		<!-- 当获取的数据有长度的时候 -->
		<div class="cart-body">
			<van-checkbox-group
				@change="groupChange"
				v-model="result"
				ref="checkboxGroup"
			>
				<van-swipe-cell v-for="(item, idx) in goodslist" :key="idx">
					<van-card :title="item.goodsName" :price="item.sellingPrice">
						<template #thumb>
							<van-checkbox :name="item.goodsId" />
							<van-image width="110" height="110" :src="item.goodsCoverImg" />
						</template>
						<template #tags>
							<van-tag type="danger">{{ item.category }}</van-tag>
						</template>
						<template #num>
							<van-stepper
								integer
								:min="1"
								:value="item.goodsCount"
								:name="item.cartItemId"
								@change="onChange"
							/>
						</template>
					</van-card>
					<template #right>
						<van-button
							square
							text="删除"
							type="danger"
							@click="deleteGood(item.cartItemId)"
						/>
					</template>
				</van-swipe-cell>
			</van-checkbox-group>
		</div>

		<van-submit-bar
			v-if="goodslist.length > 0"
			:price="total * 100"
			button-text="结算"
			@submit="onSubmit"
		>
			<van-checkbox @click="allCheck" v-model="checkAll">全选</van-checkbox>
			<template #button>
				<van-button type="danger" round style="width: 110px" @click="onSubmit"
					>结算</van-button
				>
			</template>
		</van-submit-bar>
	</div>
</template>

<script>
// import Vue from "vue";
// import axios from "axios";
// Vue.prototype.$axios = axios;
import { Toast } from "vant";
export default {
	data() {
		return {
			goodslist: [],
			// cartlist: [],
			checked: false,
			result: [],
			checkAll: false,
		};
	},
	// 购物车的逻辑:一开始进去没有商品，添加商品，页面渲染，结算
	computed: {
		total() {
			let sum = 0;
			let list = this.goodslist.filter((item) =>
				this.result.includes(item.goodsId)
			);
			list.forEach((item) => {
				sum += item.goodsCount * item.sellingPrice;
			});
			return sum;
		},
	},
	created() {
		// this.cartlist = this.$store.state.goodslist;
		// let userInfo =JSON.parse( localStorage.getItem('userInfo'));
		// console.log(userInfo.data._id);
		// axios
		//     .post("/admin/user/getcartlist", {
		//       userid:userInfo.data._id,
		//   })
		//   .then(({ data }) => {
		//     // data:为服务器传回的数据
		//     console.log(data);
		//     console.log(data.data[0].goodslist);
		//   });
		// 获取当前登录用户的购物车商品，放到数组中，如果没有商品，加入购物车的样式显示
		// ---------------------------------------------
		this.refresh();
		console.log(this.$store);
	},
	methods: {
		// // 请求购物车的数据
		refresh() {
			this.$axios
				.get("/shop-cart", {
					params: {
						pageNumber: 1,
					},
				})
				.then((data) => {
					this.goodslist = data.data;
					// console.log(this.goodslist);
				});
		},

		// 改变商品的个数
		//change	绑定值被改变时触发	currentValue, oldValue
		// name	原生属性
		async onChange(currentValue, oldValue) {
			const { data } = await this.$axios.put("/shop-cart", {
				cartItemId: oldValue.name,
				goodsCount: currentValue,
			});
			console.log(data);
			this.refresh();
		},
		// 删除商品
		async deleteGood(id) {
			const { data } = await this.$axios.delete("/shop-cart/" + id);
			// state.goodslist = data;
			console.log(data);
			this.refresh();
		},

		goURL(url) {
			this.$router.push(url);
		},
		// // 选择和全选
		// // result返回的是选中的id  goodslist
		groupChange(result) {
			if (this.goodslist !== undefined) {
				if (result.length == this.goodslist.length) {
					this.checkAll = true;
				} else {
					this.checkAll = false;
				}
				this.result = result;
				// console.log(this.result);
				localStorage.setItem("goodsId", this.result);
			}
		},
		allCheck() {
			if (this.checkAll) {
				this.result = this.goodslist.map((item) => item.goodsId);
			} else {
				this.result = [];
			}
		},
		// // 递交商品到生成订单页面
		async onSubmit() {
			if (this.result.length == 0) {
				Toast.fail("请选择商品");
				return;
			}
			const params = JSON.stringify(this.result[0]);
			this.$router.push(`/ordercart?cartItemIds=${params}`);
		},
	},
};
</script>

<style lang="scss" scoped>
.van-submit-bar {
	.van-submit-bar__bar {
		justify-content: space-between !important;
	}
	margin-bottom: 50px;
	.van-button--danger {
		color: #fff;
		background-color: #1baeae;
		border: 1px solid #1baeae;
	}
}
.empty {
	width: 50%;
	margin: 0 auto;
	text-align: center;
	margin-top: 200px;
	.van-icon-smile-o {
		font-size: 50px;
	}
	.title {
		font-size: 16px;
		margin-bottom: 20px;
		color: rgb(44, 62, 80);
		font-family: Avenir, Helvetica, Arial, sans-serif;
		text-align: center;
	}
	.van-button {
		width: 100%;
	}
	.submit-all {
		margin-bottom: 50px;
		.van-checkbox {
			margin-left: 10px;
		}
		.van-submit-bar__text {
			margin-right: 10px;
			font-size: 0.37333rem !important;
		}
		.van-submit-bar__button {
			background: #1baeae;
		}
	}
	.van-checkbox__icon--checked .van-icon {
		background-color: #1baeae;
		border-color: #1baeae;
	}
}
.van-swipe-cell {
	margin-bottom: 20px;
	.van-card__thumb {
		width: 130px;
		height: 130px;
		.van-image {
			float: right;
			margin-top: 10px;
		}
		.van-checkbox {
			display: inline-block;
			padding-top: 40%;
			box-sizing: border-box;
		}
	}
	.van-card__content {
		padding: 22px;
		.van-card__title {
			font-size: 12px;
		}
		.van-card__price {
			color: red;
			font-size: 17px;
			line-height: 30px;
		}
	}
}
.van-button--danger {
	height: 100% !important;
}
</style>
